<template>
  <div id="mainPage2">
      <my-header></my-header>
    <div style="height:100%" class="content">
      <div class="aside">
        <my-nav></my-nav>
      </div>
      <div class="viewContent">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import header from './header'
  import nav from './nav'

  export default {
    data () {
      return {
        username: '',
        ip: '',
        yunba: undefined,
        user: {}
      }
    },
    created () {
    },
    methods: {
    },
    components: {
      'my-header': header,
      'my-nav': nav
    }
  }
</script>

<style lang="less" scoped>
  #mainPage2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width:90%;
    min-width:1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    .content {
      overflow-y: hidden;
      display: flex;
      .aside {
        height: 100%;
        display: flex;
        flex-direction: column;
        min-width: 200px;
        width: 16%;
        position: relative;
        overflow-y: auto;
        padding-bottom: 60px;
      }
      .viewContent {
        flex: 1;
        background-color: #F3F3F4;
        overflow-y: auto;
        padding:20px 15px;
      }
    }
  }
</style>
